<template>
  <section class="todoapp">
    <header class="header">
      <h1>VUE3 todolists</h1>
      <input type="text" class="new-todo" placeholder="想干的事儿" v-model="newTodo" @keyup.enter="addTodo" />
    </header>
    <seciton class="main" v-show="todos.length">
      <ul class="todo-list">
        <li v-for="(todo, index) in todos" :key="todo.id" class="todo">
          <div class="view">
            <label>{{todo.title}}</label>
            <el-button icon="el-icon-delete" @click="removeTodo(todo, index)"></el-button>
          </div>
        </li>
      </ul>
    </seciton>
  </section>
</template>

<script>
  import {ref, reactive, toRefs} from 'vue'

  export default {
    name: "TodoList",
    setup() {
      const state = reactive({
        newTodo: '',
        todos: [
          { id: "1", title: "吃饭", completed: false },
          { id: "2", title: "睡觉", completed: false }
        ]
      })
      function addTodo() {
        const value = state.newTodo && state.newTodo.trim()
        if (!value) {
          return
        }
        state.todos.push({
          id: state.todos.length + 1,
          title: value,
          completed: false
        })
        state.newTodo = ''
      }
      function removeTodo(todo, index) {
        if (index < 2) {
          alert('默认的不能删除')
          return
        }
        state.todos.splice(index, 1)
      }

      return {
        ...toRefs(state),
        addTodo,
        removeTodo
      }
    }
  }
</script>

<style lang="scss" scoped>
  .todoapp {
    color: $color-color;
  }
</style>
